<template>
  <el-menu
    :default-active="nowPath"
    class="el-menu-vertical-demo"
    router
    unique-opened
    background-color="#fff"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- active-text-color="#0000ff" -->
    <div v-for="item in menu" :key="item" class="elMenu">
      <el-menu-item
        :index="item.path"
        @click="pathItem(item)"
        v-if="!item.children"
        ><el-icon><icon-Menu /></el-icon>{{ item.title }}</el-menu-item
      >
      <el-sub-menu
        :index="item.title"
        style="width: 200px"
        v-if="item.children"
      >
        <template #title>
          <el-icon><icon-Menu /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group v-for="itemc in item.children" :key="itemc">
          <el-menu-item :index="itemc.path" @click="pathItem(itemc)">{{
            itemc.title
          }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </div>
  </el-menu>
</template>

<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  components: { Document, Location, Setting, IconMenu },
  setup() {
    const $route = useRouter();
    const menu = reactive([
      {
        path: "/backgroundHome",
        title: "后台首页",
      },
      {
        title: "门诊管理",
        children: [
          { path: "/healthCard", title: "用户健康卡" },
          { path: "/aa", title: "用户挂号" },
          { path: "/bb", title: "用户就诊" },
          { path: "/cc", title: "处方划价" },
        ],
      },
      {
        title: "住院管理",
        children: [
          { path: "/dd", title: "入院登记" },
          { path: "/ee", title: "缴费管理" },
          { path: "/ff", title: "药品记账" },
          { path: "/gg", title: "项目记账" },
          { path: "/hh", title: "出院结算" },
        ],
      },
      {
        title: "系统管理",
        children: [
          { path: "/ii ", title: "菜单管理" },
          { path: "/jj", title: "角色管理" },
          { path: "/kk", title: "用户管理" },
          { path: "/ll", title: "图标管理" },
          { path: "/mm", title: "数据源监控" },
        ],
      },
      {
        title: "统计管理",
        children: [
          { path: "/nn", title: "门诊月度统计" },
          { path: "/oo", title: "住院月度统计" },
          { path: "/pp", title: "门诊月度统计" },
          { path: "/qq", title: "住院年度统计" },
          { path: "/rr", title: "医生统计对比" },
          { path: "/ss", title: "门诊当天统计" },
        ],
      },
      {
        title: "数据中心",
        children: [
          { path: "/tt", title: "科室中心" },
          { path: "/uu", title: "医生列表" },
          { path: "/vv", title: "药品产地" },
          { path: "/ww", title: "项目大类" },
          { path: "/xx", title: "挂号类型" },
          { path: "/yy", title: "仓库" },
          { path: "/zz", title: "经办人" },
          { path: "/ee", title: "计量单位" },
          { path: "/ff", title: "供货商" },
          { path: "/gg", title: "药品分类" },
          { path: "/hh", title: "药品字典" },
        ],
      },
      {
        title: "排班管理",
        children: [{ path: "/ii", title: "医生排班" }],
      },
      {
        title: "仓库管理",
        children: [
          { path: "/jj", title: "入库单" },
          { path: "/kk", title: "库存查询" },
          { path: "/ll", title: "出库单" },
          { path: "/mm", title: "库存不足" },
          { path: "/nn", title: "过期提醒" },
        ],
      },
      {
        title: "药房管理",
        children: [
          { path: "/vv", title: "药房详情" },
          { path: "/pp", title: "门诊取药" },
          { path: "/qq", title: "住院取药" },
        ],
      },
    ]);
    const nowPath = ref("/backgroundHome");
    const handleOpen = function (key, keyPath) {
      // console.log("key11", key);
      // console.log("keyPath11", keyPath);
      // console.log("keyPanowPath.valueth11", nowPath.value);
      if (key == "首页" && nowPath.value === "/backgroundHome") {
        $route.replace("/backgroundHome");
      }
    };
    const handleClose = function (key, keyPath) {
      //console.log("key22", key);
      //console.log("keyPath22", keyPath);
    };
    const pathItem = (item) => {
      nowPath.value = item.path;
      //console.log("ddfsdf", nowPath.value);
    };

    return { handleOpen, handleClose, menu, pathItem, nowPath };
  },
  watch: {
    $route(m, n) {
      //console.log("mm", m);
      //console.log("nn", n);
    },
  },
};
</script>

<style>
</style>